<!-- 设备基本状态 -->
<!-- 设备基本信息 -->
<template>
  <div class="w-100 h-100" style="display: flex">
    <div style="height: 100%; flex: 1; width: 0">
      <div
        id="tcclx"
        class="w-100"
        style="height: 100%; position: relative"
      ></div>
    </div>

    <div
      style="
        height: 100%;
        width: 580px;
        display: flex;
        align-items: center;
        justify-content: center;
      "
    >
      <el-row>
        <el-col :span="12" v-for="(item, index) in arr" :key="index">
          <fakeLenfend
            style="width: 100%; height: 90%; justify-content: left"
            :color="[item.itemStyle.color]"
            :text="[item.name]"
            :value="[item.value + '个']"
            :color-block="true"
            class="fakeLenfend"
          >
          </fakeLenfend>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup lang="ts">
import * as echarts from "echarts";
import fakeLenfend from "@/components/project/fakeLegend.vue";
import { useConvert } from "@/hook/useConvert";
import { useOptions } from "@/hook/useOptions";

const colors = useOptions().colorList;

const list = [
  "老旧小区",
  "商业小区",
  "商超",
  "医院",
  "路侧",
  "学校",
  "其他",
].map((name, index) => ({
  name,
  itemStyle: {
    color: colors[index],
  },
}));

function getOption(list: any) {
  const option = useConvert().getPie3D(list, 0.7, 150);
  option.tooltip = {
    backgroundColor: "rgba(28,64,81,0.7)",
    borderColor: "transparent",
    formatter: params => {
      if (params.seriesName !== 'mouseoutSeries') {
        return `<span style="color: #fff">${params.seriesName}<br/><span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${params.color};"></span>${option.series[params.seriesIndex].pieData.value}个 ${((option.series[params.seriesIndex].pieData.value/allCount.value)*100).toFixed(2)}%</span> `;
      }
    }
  },
  delete option.graphic;
  option.title.text = "";
  return option;
}

let myChart: any;

const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [];
  try {
    data = jsonData.value.underJsc.tcclx;
  } catch (error) {}

  return data;
});

const arr = ref([]);
const allCount = ref(0);

watch(
  () => current.value,
  (val) => {
    if (val) {
      allCount.value = val.reduce((pre: number, cur: number) => pre + cur);

      arr.value = val.map((value: any, index: number) => ({
        ...list[index],
        value: value,
      }));
      const option = getOption(arr.value);
      myChart.setOption(option);
    }
  }
);

onMounted(() => {
  myChart = echarts.init(document.getElementById("tcclx") as HTMLElement);
});
</script>

<style lang="less" scoped>
.fakeLenfend{
  :deep(.legend){
    width: 250px;
    margin-bottom: 20px;
  }
}
</style>
